<template>
  <div style="padding:0px 10px;">
    <Row type="flex" justify="center" :gutter="20">
      <i-col :span="16">
        <Row style="margin: 20px 10px auto 10px;">
          <Card class="player-card" :bordered="false">
            <p slot="title">{{videoTitle}}</p>

            <RadioGroup slot="extra" v-model="switchWay" type="button">
              <Radio label="线路一" style="margin-top:12px;background-color:rgba(0,0,0,0);height:30px;font-size:20px;color:#fff;font-weight:bold;"></Radio>
              <Radio label="线路二" style="margin-top:12px;background-color:rgba(0,0,0,0);height:30px;font-size:20px;font-weight:bold;"></Radio>
            </RadioGroup>

            <div class="vidplayer">
              <rtmp-player v-if="switchWay === '线路一'" :src="rtmpVideoSrc"></rtmp-player>
              <flv-video-player v-else :videoSrc="flvVideoSrc"></flv-video-player>
            </div>

          </Card>
        </Row>
      </i-col>
      <i-col :span="8">
        <Row style="margin-top:20px;">
          <data-statistics v-if="showConfig.isShowDataAnalysis"></data-statistics>
        </Row>
        <Row style="margin-top:0px;">
          <events-table
            :tableData="monitorEventsTableListData"
            :tableHeight="showConfig.tableHeight">
          </events-table>
        </Row>
      </i-col>
    </Row>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import FlvVideoPlayer from './flvVideoPlayer'
import RtmpPlayer from "./rtmpPlayer";

import DataStatistics from './dataStatistics'
import EventsTable from "./eventsTable.vue";

import {mapState, mapGetters, mapActions} from 'vuex'

export default {
  components: {
    FlvVideoPlayer,
    RtmpPlayer,
    DataStatistics,
    EventsTable
  },
  data () {
    return {
      switchWay: '线路二'
    }
  },
  computed: {
    ...mapState([
      'monitorData',
      'stationVideoStreamUrl',
      'monitorEventsTableListData'
    ]),
    ...mapGetters([
      'dayWeekMonthStartEndTime',
    ]),
    // 显示配置
    showConfig() {
      console.log('this.monitorData.reqPlayerInfo.category', this.monitorData.reqPlayerInfo.category)
      let showCategory = this.monitorData.reqPlayerInfo.category
      if(showCategory === "switching_room") {
        return {
          isShowDataAnalysis: false,
          tableHeight: '830'
        }
      } else if (showCategory === "safebox") {
        return {
          isShowDataAnalysis: true,
          tableHeight: '1010'
        }
      } else if (showCategory === "overview" || showCategory === "refuel_side") {
        return {
          isShowDataAnalysis: true,
          tableHeight: '634'
        }
      } else {
        return {
          isShowDataAnalysis: true,
          tableHeight: '540'
        }
      }
    },
    rtmpVideoSrc() {
      console.log('rtmp视频信息：', this.monitorData)
      return this.monitorData.reqPlayerInfo.streamUrl
    },
    flvVideoSrc() {
      console.log('flv视频信息：', this.monitorData)
      return this.monitorData.reqPlayerInfo.httpflvUrl
    },
    videoTitle() {
      return this.monitorData.reqPlayerInfo.title
    }
  },
  mounted() {
    // 如果是 超市大门，右侧数据显示收银台的数据
    if(this.monitorData.reqPlayerInfo.category === 'gate'){
      let checkoutChannel = this.stationVideoStreamUrl.find((ele)=>ele.category === 'checkout')
      console.log('checkoutChannel', checkoutChannel)
      let eventsParams = {
        start_time: dayjs().subtract(7, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        end_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        station: this.monitorData.reqPlayerInfo.station,
        channel: checkoutChannel.channel,
        page_index: 1,
        page_size: 40
      }
      this.getMonitorEventsTableList(eventsParams)
    } else if(this.monitorData.reqPlayerInfo.category === 'overview'){

      let eventsParams = {
        start_time: dayjs().subtract(7, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        end_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        station: this.monitorData.reqPlayerInfo.station,
        category: 'refuel_side',
        page_index: 1,
        page_size: 40
      }
      this.getMonitorEventsTableList(eventsParams)
    } else {
      let eventsParams = {
        start_time: dayjs().subtract(7, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        end_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        station: this.monitorData.reqPlayerInfo.station,
        channel: this.monitorData.reqPlayerInfo.channel,
        page_index: 1,
        page_size: 20
      }
      this.getMonitorEventsTableList(eventsParams)
    }
  },
  methods: {
    ...mapActions([
      'getMonitorEventsTableList'
    ])
  }
}
</script>

<style lang="less">
.vidplayer {
  height: 100%;
  width: 100%;
}
.player-card .ivu-card-head {
  padding: 0px 10px;
  background-color: #13a4c2;
  border-bottom: 1px solid #13a4c2;
  height: 80px;
}
.player-card .ivu-card-head p {
  font-size: 4rem;
  height: 80px;
  line-height: 80px;
  color: #fff;
  text-align: left;
}
.player-card .ivu-card-body {
  padding: 0px;
}
.player-card .ivu-radio-wrapper-checked {
  border-color: #fa541c !important;
  color: #fa541c !important;
}
// .player-card .ivu-radio-wrapper {
//   border-color: #515a6e !important;
//   color: #515a6e !important;
// }
</style>


